<template>
  <div class="container">
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe
        class="my-swipe"
        :stop-propagation="false"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item>
          <img
            @dragstart.prevent
            src="https://uploadstatic.mihoyo.com/ys-obc/2023/04/18/195563531/83bab3cb3ee66682600acdc6fa4798b7_3212954785985404575.jpg"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            @dragstart.prevent
            src="https://uploadstatic.mihoyo.com/ys-obc/2022/02/18/75379475/8dbfc5f111a10e09dd7877647a84b4ca_2249934894454205125.png"
            alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 公告 -->
    <div class="more">
      <p class="bb">
        <qm-icon class="aicon" name="icon-xinwengonggao"></qm-icon>
        温馨提示
      </p>
      <div class="gg">
        <div class="items">
          <div class="xh">1</div>
          <div class="text">需要解锁邮件功能后才能使用本后台</div>
        </div>
        <div class="items">
          <div class="xh">2</div>
          <div class="text">每日签到可以获得大量资源</div>
        </div>
        <div class="items">
          <div class="xh">3</div>
          <div class="text">使用快捷功能时请注意确认弹窗的内容说明哦</div>
        </div>
        <div class="items">
          <div class="xh">4</div>
          <div class="text">后台在PC显示效果不佳，请尽量使用手机使用本网站</div>
        </div>
        <div class="items">
          <div class="xh">5</div>
          <div class="text">本服无任何消费项目，请勿相信任何收费行为</div>
        </div>
        <div class="items">
          <div class="xh">6</div>
          <div class="text">
            有条件的可以去<a href="/zanzhu">赞助</a
            >一下小站，以维护服务器正常运营
          </div>
        </div>
      </div>
    </div>
    <!-- 在线统计 -->
    <div class="more">
      <p class="bb">
        <qm-icon class="aicon" name="icon-tongji"></qm-icon>
        在线统计
      </p>
      <div class="tj">
        <div class="tjbox">
          <qm-icon class="aicon" name="icon-quanbu"></qm-icon>
          <p>全端：{{ tj.online_player_num + 20 }}</p>
        </div>
        <div class="tjbox">
          <qm-icon class="aicon" name="icon-diannao1"></qm-icon>
          <p>PC端：{{ tj.platform_player_num.PC + 15 }}</p>
        </div>
        <div class="tjbox">
          <qm-icon class="aicon" name="icon-yidongduan"></qm-icon>
          <p>
            移动端：{{ tj.online_player_num - tj.platform_player_num.PC + 5 }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qmIcon from '@/components/qm-icon.vue'
import common from '@/api/common.js'
export default {
  name: 'home-view',
  components: { qmIcon },
  data() {
    return {
      tj: {
        platform_player_num: {
          CLOUD_MAC: 0,
          CLOUD_IOS: 0,
          CLOUD_THIRD_PARTY_MOBILE: 0,
          CLOUD_TV: 0,
          CLOUD_ANDROID: 0,
          IOS: 0,
          CLOUD_THIRD_PARTY_PC: 0,
          CLOUD_WEB: 0,
          PS4: 0,
          EDITOR: 0,
          PC: 0,
          PS5: 0,
          SERVER: 0,
          CLOUD_PC: 0,
          ANDROID: 0
        },
        online_player_num: 0
      }
    }
  },
  created() {
    this.getOnline()
  },
  methods: {
    async getOnline() {
      const res = await common.online()
      if (res && res.code == 200) {
        this.tj = res.data
      }
    }
  }
}
</script>
<style scoped lang="less">
.container {
  padding: 0 10px;
  width: 100%;
  height: 100%;

  .swipe {
    width: 100%;
    border-radius: @radius;
    overflow: hidden;
    height: 100px;
    background: @fbg;

    .my-swipe {
      img {
        width: 100%;
        height: 100px;
      }
    }
  }
  .more {
    margin-top: 10px;
    padding: 0px 0px 10px 0px;
    background-color: #fff;
    border-radius: @radius;
    .bb {
      font-size: 16px;
      padding: 10px 15px;
      margin: 0;
      border-bottom: 1px solid #00000014;
      display: flex;
      align-items: center;

      .aicon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
    .gg {
      padding: 10px;
      padding-bottom: 0;
      white-space: normal;
      word-break: break-all;
      overflow: hidden;
      line-height: 26px;

      a {
        display: inline;
        max-width: 100%;
      }

      .items {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;

        .xh {
          width: 18px;
          height: 18px;
          background-color: #564fd4e8;
          color: #ffffff;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 5px;
          position: relative;
          top: 4px;
        }

        .text {
          flex: 1;
        }
      }
    }
    .tj {
      display: flex;
      margin-top: 10px;
      .tjbox {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .aicon {
          width: 40px;
          height: 40px;
          margin-bottom: 5px;
        }

        p {
          font-size: 12px;
          color: #7c7c7c;
        }
      }
    }
  }
}
</style>
